---
import { ImageCaption } from './ImageCaption';
import { getPageImages } from '@features/docs/utils/filesData';
import { getPageNameFromPath } from '@features/docs/utils/urlPaths';

interface Props {
    pageName?: string;
    imagePath: string;
    alt: string;
    centered?: boolean;
    constrained?: boolean;
    descriptionTop?: boolean;
    width?: string;
    height?: string;
    minWidth?: string;
    maxWidth?: string;
    /**
     * Enable styles for dark mode using CSS Filters
     */
    enableDarkModeFilter?: boolean;
}

const { pageName: propPageName, imagePath, alt, ...props } = Astro.props as Props;

const pageName = propPageName ? propPageName : getPageNameFromPath(Astro.url.pathname);

const { imageSrc, darkModeImageSrc, gifStillImageSrc, gifDarkModeStillImageSrc } = await getPageImages({
    pageName,
    imagePath,
});
const caption = await Astro.slots.render('default');
const isGif = imagePath.endsWith('.gif');
---

{
    imageSrc && (
        <ImageCaption
            client:load
            imageSrc={imageSrc}
            darkModeImageSrc={darkModeImageSrc}
            gifStillImageSrc={gifStillImageSrc}
            gifDarkModeStillImageSrc={gifDarkModeStillImageSrc}
            captionHtml={caption}
            isGif={isGif}
            {...props}
        />
    )
}
